import { getHomelistingInfoById } from "@/services";
import type { HomelistingsInfo } from "@/services";
import React, { RefObject, useRef } from "react";
import { history, useSearchParams } from "umi";
import { Image, ImageViewer, Tag } from "antd-mobile";
import { parseImageUrl } from "@/utils";
import dayjs from "dayjs";
import { useSafeState } from "ahooks";
// import { SlidesRef } from "antd-mobile/es/components/image-viewer/slides";
import { SlidesRef } from "antd-mobile/es/components/image-viewer/slides";

const AssetDetail: React.FC = () => {
  const [searchParams] = useSearchParams();
  const [assetsDetail, setAssetsDetail] = useSafeState<HomelistingsInfo>();
  const [previewVisible, setPreviewVisible] = useSafeState(false);

  const previewRef = useRef<SlidesRef>(null);
  const getAssetsDetailRequest = async () => {
    const onlyId = searchParams.get("onlyId");
    if (!onlyId) return;
    const res = await getHomelistingInfoById({
      onlyId,
    });
    if (res.code === 200) {
      setAssetsDetail(res.data);
    } else {
      // handle error
      history.back();
    }
  };

  React.useEffect(() => {
    getAssetsDetailRequest();
  }, []);

  const assetsList = [
    "法拍房产",
    "法拍商业",
    "二手商业",
    "特殊产业",
    "车位",
    "其他",
  ];

  const auctionList = ["一拍", "二拍", "变卖", "其他"];

  return (
    <div>
      {assetsDetail && (
        <div>
          {/* 封面 */}
          <Image
            className="w-full h-200px "
            src={parseImageUrl(assetsDetail.imgUrl)}
            fit="cover"
          />
          {/* 信息 */}
          <div>
            <div className="p-10px">
              <div className="font-bold text-16px">
                {assetsDetail.communityName && (
                  <Tag color="primary" fill="outline" className="mr-6px">
                    {assetsDetail.communityName}
                  </Tag>
                )}

                <span>{assetsDetail.name}</span>
              </div>
              <div className="mt-6px flex items-center">
                <span>类型：</span>
                <Tag color="default" fill="outline">
                  {assetsList[assetsDetail.type]}
                </Tag>
                <span className="ml-10px">阶段：</span>
                <Tag color="success" fill="outline">
                  {auctionList[assetsDetail.auctionMethod]}
                </Tag>
              </div>
              <div className="mt-6px flex items-center">
                <span>面积:</span>
                <span className="text-orange-6 ml-6px">
                  {assetsDetail.area}㎡
                </span>
              </div>
              <div className="mt-6px flex items-center">
                <span className="">市场/起拍价：</span>
                <Tag color="success" fill="outline">
                  ¥{assetsDetail.marketPrice}万元
                </Tag>
                <span className="mx-1">/</span>
                <Tag color="success" fill="outline">
                  ¥{assetsDetail.startingBidPrice}万元
                </Tag>
              </div>
              <div className="mt-6px flex items-center">
                <span>状态：</span>
                {assetsDetail.auctionStatus === 0 && (
                  <span className="text-orange-6"> 未起拍</span>
                )}
                {assetsDetail.auctionStatus === 1 && (
                  <span className="text-blue-6"> 竞拍中</span>
                )}
                {assetsDetail.auctionStatus === 2 && (
                  <span className="text-red-6"> 已结束</span>
                )}
              </div>
              <div className="mt-6px flex items-center">
                <span>起拍时间：</span>
                <span className="text-blue-6">
                  {dayjs(assetsDetail.shootingTime).format("YYYY-MM-DD HH:mm")}{" "}
                </span>
              </div>
              <div className="mt-6px flex items-center">
                <span>截止时间：</span>
                <span className="text-blue-6">
                  {assetsDetail.stopTime
                    ? dayjs(assetsDetail.stopTime).format("YYYY-MM-DD HH:mm")
                    : "未知"}
                </span>
              </div>
            </div>
          </div>
          {/* 详情图 */}
          <div className="w-full h-1px bg-gray-1"></div>
          <div className="mt-10px">
            {assetsDetail.detailImages &&
              assetsDetail.detailImages.split(",").map((item, index) => (
                <Image
                  key={item}
                  className="w-full h-240px"
                  src={parseImageUrl(item)}
                  fit="cover"
                  onClick={() => {
                    setPreviewVisible(true);
                    previewRef.current?.swipeTo(index, true);
                  }}
                />
              ))}
          </div>
          {/* 预览组件 */}
          <ImageViewer.Multi
            ref={previewRef}
            images={assetsDetail.detailImages.split(",")}
            visible={previewVisible}
            defaultIndex={1}
            onClose={() => {
              setPreviewVisible(false);
            }}
          />
          <div className="h-70px"></div>
        </div>
      )}
    </div>
  );
};

export default AssetDetail;
